<!--
 * @Descripttion:
 * @version:
 * @Author: xiajunchen
 * @Date: 2021-05-28 10:19:06
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-06-01 09:40:14
-->
<template>
  <el-form
    ref="ruleForm"
    class="el-form-container"
    :model="ruleForm"
    :rules="this.$props.rules"
  >
    <div
      v-if="only && only.type === EDITFORMONLY"
      class="el-form-item"
    >
      <label :for="only.key" class="el-form-item__label">{{ only.label }}: </label>
      <span class="el-form-item__content">{{ only.value }}</span>
    </div>
    <template v-for="item in list">
      <el-form-item :key="item.key || item.label" :label="item.label + ':'" :prop="item.key">
        <component :is="item.type" :items="item" @change="modifyList" />
      </el-form-item>
    </template>
    <el-form-item>
      <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
      <slot name="cancel" />
    </el-form-item>
  </el-form>
</template>
<script>
import Input from './components/input'
import TimeRange from './components/timeRange'
export default {
  name: 'EditForm',
  components: {
    Input,
    TimeRange
  },
  props: {
    rules: {
      type: Object,
      default: () => {}
    },
    formList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      ruleForm: {},
      EDITFORMONLY: 'Txt',
      list: []
    }
  },
  computed: {
    only: function() {
      const o = this.$props.formList[0]
      if (o && o.type === this.EDITFORMONLY) {
        return o
      } else {
        return null
      }
    }
  },
  mounted() {
    this.list = this.$props.formList.filter(item => item.type !== this.EDITFORMONLY)
    const ruleForm = {}
    this.$props.formList.forEach(item => {
      if (item.key) {
        ruleForm[item.key] = item.value || ''
      } else {
        if (item.startkey && item.endkey && item.value) {
          ruleForm[item.startkey] = item.value[0] || ''
          ruleForm[item.endkey] = item.value[1] || ''
        }
      }
    })
    this.ruleForm = ruleForm
    console.log(ruleForm, 'ruleForm')
  },
  methods: {
    modifyList(val) {
      const { key, value, type } = val
      const arr = JSON.parse(JSON.stringify(this.list))
      const arrC = JSON.parse(JSON.stringify(this.ruleForm))
      arr.forEach(item => {
        if (type.includes('Rang') && !key) {
          item[item.startkey] = val[item.startkey]
          item[item.endkey] = val[item.endkey]
          arrC[item.startkey] = val[item.startkey]
          arrC[item.endkey] = val[item.endkey]
        } else if (item.key === key) {
          item.value = value
          arrC[key] = value
        }
      })
      this.list = arr
      this.ruleForm = arrC
      console.log(this.list)
      this.$forceUpdate()
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          const temObj = {}
          this.list.forEach(item => {
            if (item.key) {
              temObj[item.key] = item.value
            } else {
              temObj[item.startkey] = item[item.startkey]
              temObj[item.endkey] = item[item.endkey]
            }
          })
          this.sendEvent(valid, temObj)
        } else {
          this.sendEvent(valid, {})
        }
      })
    },
    // resetForm(formName) {
    //   this.$refs[formName].resetFields()
    // },
    sendEvent(isPass, params) {
      this.$emit('submit', {
        isPass,
        params: { ...params }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.el-form-container {
   .only {
        display: block;
        float: unset;
        text-align: left;
    }
}
</style>
